<template>
	<view class="invite-modal">
		<view class="content-top">
			{{status =='grouping' ? '邀请好友' :'拼团详情'}}
		</view>
		<template v-if="step == '1'">
			
			<view class="content">
				<view class="content-item" v-for="item in data.userList" :key="item.userId">
					<img :src="item.userAvatar" alt="">
					<text>{{ item.userName }}</text>
				</view>
				<template v-if="data.userList.length<data.purchaserNum">
					<view class="content-item" v-for="item in data.purchaserNum-data.userList.length" :key="item">
						<img src="../../static/add.png" alt="">
						<text>等待拼团</text>
					</view>
				</template>

			</view>
			<view class="content-tip">
				<view>
					1、需要邀请好友参与下单，才能完成拼团；
				</view>
				<view>
					2、拼单完成后，供应商开始发货；
				</view>
				<view>
					3、商品未成团，活动结束后系统自动取消订单，自动退款；
				</view>
			</view>
<view class="content-bottom">
			<text class="invite-btn"
				@click="changeStep">{{ status === 'grouping' && step === 1 && data.goodsId ? '立即邀请' : '关闭' }}</text>
		</view>
		</template>
		<template v-else>
			<view  >
				<view class="qrContent">
					<ayQrcode ref="qrcode" :modal="modal_qr" :url="computedUrl" @hideQrcode="hideQrcode" :height="250"
						:width="250" :h_w_img="250"/>
				
				</view>
				<view class="MT10" style="word-break: break-word;">{{computedUrl}} <text class="copy" @click="copySn">复制</text></view>
				<view class="MT10">保持二维码或者复制链接发给好友一起拼团！</view>
			</view>
			
		</template>
		
	</view>
</template>

<script>
	import {
		getByOrderId
	} from '../../api/order/order.js'
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	import {h5Copy} from '../../common/utils/func.js'
	export default {
		name: "cartDiscount",
		components: {
			ayQrcode
		},
		props: {

			orderId: "",
			status: ""
		},

		data() {
			return {
				data: {
					userList: []
				},
				step: 1,
				modal_qr: false
			}
		},
		mounted() {
			this.loadData()
		},
		computed: {
			computedUrl() {
				return window.location.origin + '/#/protalProduct?id=' + this.data.goodsId + '&groupId=' + this.data
					.userList[0].groupId
			}
		},
		methods: {
			 // 展示二维码
			            showQrcode() {
			                let _this = this;
							console.log('0000')
			                // uni.showLoading()
			                setTimeout(function() {
			                    // uni.hideLoading()
								console.log(_this.$refs)
			                    _this.$refs.qrcode.crtQrCode()
								console.log(_this.$refs.qrcode)
			                }, 50)
			            },
			
			            //传入组件的方法
			            hideQrcode() {
			                this.modal_qr = false;
			            },
			loadData() {
				getByOrderId({
					orderId: this.orderId
				}).then(res => {
					if (res.code == 0) {
						this.data = res.data
							
						}
				})
			},
			changeStep() {
				console.log(this.computedUrl)
				if (this.status === 'grouping' && this.step === 1) {
					this.modal_qr = true
					this.$nextTick(() => {
						this.showQrcode()
					})			
					this.step = 2
				} else {
					this.handleCancel()
				}
			},
			handleCancel() {

			},
			copySn() {
			    //#ifdef MP
				uni.setClipboardData({
					data: this.computedUrl,
					success: () => {
						uni.showToast({
							icon: "success",
							title: '复制成功'
						})
					}
				})
			    // #endif
			    // #ifdef H5
			    if(h5Copy(this.computedUrl)){
			        uni.showToast({
			            icon: "success",
			            title: '复制成功'
			        })
			    }
			    // #endif
			
			},
		},

	}
</script>

<style lang="scss" scoped>
	.invite-modal {
		.content-top {
			padding: 20rpx;
			border-bottom: 1px solid #ccc;
		}

		.content {
			background-color: #fff;
			display: flex;
			padding: 20rpx 40rpx;
			justify-content: space-around;

			.content-item {
				text-align: center;
				width: 140rpx;

				img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;

				}

				text {
					text-align: center;
					display: block;
				}
			}

		}

		.content-tip {
			padding: 40rpx;
		}

		.content-bottom {
			text-align: center;
			padding-bottom: 40rpx;

			.invite-btn {
				border: 1px solid #1E82E3;
				width: 200rpx;
				height: 60rpx;
				display: inline-block;
				line-height: 58rpx;
				border-radius: 10rpx;
				color: #1E82E3;
			}
		}
	}
	.qrContent {
		padding: 40rpx;
		padding-left: 15rpx;
	}
	.copy {
		color: #1E82E3;
		border: 1px solid #1E82E3;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
	}
	.MT10 {
		margin-top: 20rpx;
		padding: 0 30rpx 30rpx;
	}
</style>
